<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .da{
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 0;
            top: 150px;
            margin: auto;
        }
        ul{
            display: flex;
        }
        li{
            list-style: none;
        }
        li img{
            width: 400px;
            height: 400px;
        }
        span{
            position: absolute;
            display: none;
            bottom: 50%;
            font-size: 40px !important;
        }
        .l{
            left: 10px;
        }
        .r{
            right: 10px;
        }
        ol{
            position: absolute;
            left: 50%;
            bottom: 40px;
            display: flex;
            margin-left: -50px;
        }
        ol li{
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="da">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>
        <span class="iconfont icon-xiangyoujiantou r"></span>
        <span class="iconfont icon-xiangzuojiantou l"></span>
        <ol>
            <li style="background-color: red;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li ></li>
        </ol>
    </div>
</body>
</html>
<script>
    var zan=document.querySelector('.l')
    var ran=document.querySelector('.r')
    var imgs=document.querySelectorAll('ul img')
    var lis=document.querySelectorAll('ol li')
    var ul=document.querySelector('ul')
    var da=document.querySelector('.da')
    var num=0
    var tpsl=imgs.length
    var ysl=0

    var klt=ul.children[0].cloneNode(true)
    ul.appendChild(klt)

    ran.onclick=function(){
        num++
        if(num>tpsl){
            ul.style.transition='none'
            ul.style.transform=`translateX(0px)`
            num=1
            setTimeout(()=>{
            ul.style.transition='all 0.5s'
            ul.style.transform=`translateX(${-num*400}px)`
            },16)
        }else{
            ul.style.transition='all 0.5s'
            ul.style.transform=`translateX(${-num*400}px)` 
        }
        ysl=(ysl+1)%lis.length
        bs(ysl)
    }
    zan.onclick=function(){
        if(num==0){
            num=tpsl
            ul.style.transition='none'
            ul.style.transform=`translateX(${-num*400}px)`
            setTimeout(()=>{
            num--
            ul.style.transition='all 0.5s'
            ul.style.transform=`translateX(${-num*400}px)`
            },16)
        }else{
            num--
            ul.style.transition='all 0.5s'
            ul.style.transform=`translateX(${-num*400}px)` 
        }
        ysl=(ysl-1+lis.length)%lis.length
        bs(ysl)
    }
    da.onmouseenter=function(){
        ran.style.display= `block`
        zan.style.display= `block`
        clearInterval(dsq)
    }
    da.onmouseleave=function(){
        ran.style.display= `none`
        zan.style.display= `none`
        zdlb()
    }
    function zdlb(){
        dsq=setInterval(function(){
            ran.onclick()
        },2000)
    }
    zdlb()
    for(i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i)
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            ul.style.transition='all 0.5s'
            ul.style.transform=`translateX(${-index*400}px)`
            bs(index)
        }
    }
    function bs(index){
        for(i=0;i<lis.length;i++){
            lis[i].style.backgroundColor='#fff'
        } 
        lis[index].style.backgroundColor='red'
    }
</script>